<template>
  <IForm ref="form" :model="formData" :rules="rules" class="register-form-cpn">

    <IFormItem label="注册账号:" prop="username" class="i-form-item">
      <NumInput
              :pMaxLength="10"
              v-model="formData.username"
              type="text"
              @mBlur="mSearchUserByUsername"/>
    </IFormItem>
    <IFormItem label="设置密码:" prop="pwd" class="i-form-item" >
      <NumInput
              :pMaxLength="17"
              v-model="formData.pwd"
              type="password"
              @mBlur="mVerPwd"/>
    </IFormItem>
    <IFormItem label="确认密码:" prop="repwd" class="i-form-item" >
      <NumInput
              :pMaxLength="17"
              v-model="formData.repwd"
              type="password"
              @mBlur="mVerRePwd"/>
    </IFormItem>

    <button @click="handleSubmit" class="i-from-item-btn">注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册</button>

  </IForm>
</template>

<script>
  import IForm from 'components/common/form/IForm'
  import IFormItem from 'components/common/form/IFormItem'
  import IInput from 'components/common/input/ordInput/IInput'
  import NumInput from 'components/common/input/numInput/IInput'


  // 网络请求的方法
  import {searchUserByUsername} from "network/mix";
  import {register} from "network/noVer";

  export default {
    name: "RegisterGo",
    data () {
      return {
        accountVer: false, // 把账号验证的结果存放在变量里，防止在点击提交注册按钮后出现吐司重叠
        pwdVer: false,
        rePwdVer: false, // 把密码验证结果存放在变量里，防止在点击提交注册按钮后出现吐司重叠

        formData: {
          username: '',
          pwd: '',
          repwd: '',
        },
        rules: {
          username: [
            { required: true, message: '账号为空', trigger: 'blur'}
          ],
          pwd: [
            { required: true, message: '密码为空', trigger: 'blur'}
          ],
          repwd: [
            { required: true, message: '确认为空', trigger: 'blur'}
          ]
        }
      }
    },
    components: {
      IForm,
      IFormItem,
      IInput,
      NumInput,

    },
    beforeDestroy() { // 销毁此组件之前
      this.$bus.$emit('registerGoReady', { // 发送registerGoReady事件,并携带参数account
        account: this.formData.username, // 传递参数
        password: this.formData.pwd,
      })
      // console.log('registerGoReady事件已通过总线发出');
    },
    computed: {
    },
    methods: {
      handleSubmit () {
        this.$refs.form.validate((valid) => {
          if (valid && this.accountVer && this.pwdVer && this.rePwdVer) { // 如果前台验证通过

            this.mRegister(this.formData.username, this.formData.pwd)
            this.$emit('ready', 2)

          } else {
            this.$err_ty_toast.toShow('验证失败,请保证账号和密码合法且两次密码一致', 5000)
          }

        })
      },

      /**验证账户是否合法的函数*/
      mSearchUserByUsername (value) {
        if (value.length === 10) { // 如果长度合法
          searchUserByUsername(value)
            .then(result => {
              // console.log('-----' + result);
              // console.log(result);
              if (result.code === 200) {
                this.$err_ty_toast.toShow(value + '账号已经存在,不可注册', 2000)
                this.accountVer = false

              } else if (result.code === 401){
                this.$mes_ty_toast.toShow(value + '账号可以注册', 2000)
                this.accountVer = true

              }
            })
            .catch(error => {
              // console.log('----------' + error)
              this.accountVer = false
            })
        } else {
          this.$err_ty_toast.toShow('请设置账号保持10位', 2000)
          this.accountVer = false

        }
      },
      /**验证密码是否合法*/
      mVerPwd (value) {
        if (value.length < 8 || value.length > 17) {
          this.$err_ty_toast.toShow('请保证密码在8位到17位之间！！！', 2000)
          this.pwdVer = false

        } else {
          this.pwdVer = true

        }
      },
      /**验证两次密码是否一致*/
      mVerRePwd (value) {
        if (this.formData.pwd !== value) {
          this.$err_ty_toast.toShow('两次密码不同！！！', 2000)
          this.rePwdVer = false

        } else if (!this.pwdVer) {
          this.$err_ty_toast.toShow('请保证密码在8位到17位之间！！！', 2000)
          this.rePwdVer = false
        }
        else if (this.formData.pwd === value && this.pwdVer) { // 两次密码相同,且密码验证无误
          this.$mes_ty_toast.toShow('密码合格', 2000)
          this.rePwdVer = true

        }
      },



      /**
       * axios的网络请求
       */
      mRegister(username, password) {
        register(username, password)
          .then(result => {
            if (result.code === 200) {
              this.$succ_ty_toast.toShow(username + '注册成功', 4000)
            }
          })
      }
    }
  }
</script>

<style scoped>
  .register-form-cpn {
    width: 100%;
    height: 89%;
    /*margin: 0 auto; !*设置块级元素水平居中和垂直居中*!*/

    /*background-color: teal;*/

  }
  .i-form-item {
    position: relative;
    left: 15%;
    top: 10%;

    height: 8%; /*设置该item的高度,否则提示信息撑开盒子*/

    margin-top: 10%;

    /*background-color: yellow;*/
  }

  .i-from-item-btn {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translate(-50%, -50%);

    color: #ffffff;
    font-size: 20px;
    line-height: 20px;

    border-radius: 6px;
    background-color: red;
    border: none;
    outline: none;

    width: 60%;
    height: 6%;
  }
  .i-from-item-btn:hover {
    cursor: pointer; /*放上变手指*/
    opacity: 0.7;
  }
</style>